<template>
  <div>
    <ProductDetail
      :product="currentProduct"
      @cart-updated="handleCartUpdate"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from '../store'
import ProductDetail from '../components/ProductDetail.vue'
import { ElMessage } from 'element-plus'

const route = useRoute() // 获取路由参数（商品id）
const store = useStore()
const currentProduct = ref({}) // 当前商品详情

onMounted(async () => {
  await store.fetchProducts() // 确保商品列表已加载
  // 根据id查找商品
  const product = store.products.find(
    item => item.id === Number(route.params.id)
  )
  if (product) {
    currentProduct.value = product
  } else {
    ElMessage.error('商品不存在')
  }
})

// 购物车更新后的回调（可选）
const handleCartUpdate = () => {
  // 可添加更新购物车数量提示等逻辑
}
</script>
